import React from 'react';
import './index.less';
import { Card, Button, Icon, Radio} from 'antd';
const ButtonGroup = Button.Group;
export default class Buttons extends React.Component{ 
    state = {
        loading: false,
        iconLoading: false,
      };
      enterLoading = () => {
        this.setState({ loading: true });
      };
    
      enterIconLoading = () => {
        this.setState({ iconLoading: true });
      };
    render() {
        return (
            <div>
                 <Card title="基础按钮" className="card-wrap">
                        <Button type="primary">Primary</Button>
                        <Button>Default</Button>
                        <Button type="dashed">Dashed</Button>
                        <Button type="danger">Danger</Button>
                        <Button type="link">Link</Button>
                 </Card>
                 
                 <Card title="图形按钮" className="card-wrap">
                        <Button  icon="plus">创建</Button>
                        <Button  icon="form">编辑</Button>
                        <Button  icon="delete">删除</Button>
                        <Button type="primary" icon="search">搜索</Button>
                        <Button type="primary" icon="download">下载</Button>
                       
                        
                 </Card>
                 <Card title="Loading按钮" className="card-wrap">
                       <Button type="primary" loading>
                        Loading
                        </Button>
                       
                       
                        <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
                        Click me!
                        </Button>
                        <Button
                        type="primary"
                        icon="poweroff"
                        loading={this.state.iconLoading}
                        onClick={this.enterIconLoading}
                        >
                        Click me!
                        </Button>
                      
                        <Button type="primary" loading />
                        <Button type="primary" shape="circle" loading />
                        <Button type="danger" shape="round" loading />
                 </Card>
                 <Card title="按钮组" style={{marginBottom:"10px"}}>
                         <ButtonGroup>
                            <Button type="primary">
                                <Icon type="left" />
                                Go back
                            </Button>
                            <Button type="primary">
                                Go forward
                                <Icon type="right" />
                            </Button>
                       </ButtonGroup>
                 </Card>
                 <Card title="按钮尺寸" className="card-wrap">
                        <Button type="primary" size="large">Primary</Button>
                        <Button type="primary">Primary</Button>
                        <Button type="primary" size="small">Primary</Button>
                 </Card>
            </div>
        )
    }
}